<template>
  <div class="Demo">
      <van-nav-bar
  title="标题"
  left-text=""
  left-arrow
  @click-left="$router.go(-1)"
/>
    <div class="smallBox">
      <span>评价驿站海湾镇店</span>
      <p>
        <span>
          <van-rate v-model="value" :size="25" color="#ffd21e" void-icon="star" void-color="#eee" />
        </span>
        <span>打赏</span>
      </p>
    </div>
    <div class="bigBox">
      <div class="line"></div>
      <p class="pbox">
        <span>
          <span class="spans">收</span>
          EMS 113251265125165
        </span>
        <b>复制</b>
      </p>
      <li>
        <span class="span">收</span>
        <b>上海上海市奉贤区海湾 镇五四公路3389号.上海市福海区奥尼古拉拖拉附身22号 173****0562</b>
      </li>
      <li>
        <span class="span">收</span>
        <b>
          <p>已签收02-19 13:05</p>您已在.古拉拖拉附身22号店完成取件，感谢使用菜鸟站期待再次与您服务.
        </b>
      </li>
      <li>
        <span class="span">收</span>
        <b>
          <p>派送中02-18 13:05</p>奉贤区营业部安排投递员:沈小军，电话:13356226669 揽投部嗲电话:021-57541333
        </b>
      </li>
      <li>
        <span class="span">收</span>
        <b>
          <p>运输中02-18 13:05</p>到达[奉贤区平安营业部]
        </b>
      </li>
    </div>
  </div>
</template>

<script>
import Vue from "vue";
import { Rate } from "vant";

Vue.use(Rate);
export default {
  data() {
    return {
      value: 3
    };
  }
};
</script>

<style lang="scss">
@import "@css/style.scss";
* {
  box-sizing: border-box;
}
.line {
  width: 2px;
  height: px2rem(248);
  border: 1px solid #ccc;
  position: absolute;
  left: 45px;
}
.Demo {
  width: 100%;
  height: 100%;
  background-image: url("../../assets/images/background.png");
  overflow: hidden;
  font-size: px2rem(10);
}
.smallBox {
  width: px2rem(351);
  height: px2rem(72);
  background: #fff;
  border-radius: px2rem(10);
  margin: 0 auto;
  margin-top: px2rem(338);
  font-size: px2rem(10);
  span {
    display: block;
    padding: px2rem(9) px2rem(21) 0 px2rem(21);
  }
  p {
    display: flex;
    justify-content: space-between;
    align-items: center;
  }
}
.bigBox {
  width: px2rem(351);
  height: px2rem(248);
  background: #fff;
  border-radius: px2rem(10) px2rem(10) 0 0;
  margin: 0 auto;
  margin-top: px2rem(11);
  list-style: none;
  li {
    line-height: px2rem(20);
    display: flex;
    align-items: center;
    margin: px2rem(3) 0;
    .span {
      background: #f7684f;
      color: #fff;
      padding: px2rem(5) px2rem(8);
      border-radius: 50%;
      margin: 0 px2rem(20);
      text-align: center;
      z-index: 9999;
    }
    b {
      text-align: left;
      p {
        color: #f7684f;
      }
    }
  }
  :nth-child(6) span {
    padding: px2rem(5) px2rem(8);
    margin: 0 px2rem(20);
    background: #ccc;
  }
  :nth-child(5) span {
    padding: px2rem(5) px2rem(8);
    margin: 0 px2rem(20);
    background: #ccc;
  }
  :nth-child(6) b {
    color: #ccc;
  }
  :nth-child(4) b {
    color: #ccc;
  }
  :nth-child(5) b {
    color: #ccc;
  }
}
.pbox {
  display: flex;
  justify-content: space-between;
  padding: 10px 20px;
  align-items: center;
  color: #ccc;
  span {
    z-index: 999999;
  }
  b {
    color: #000;
  }
}
.spans {
  padding: px2rem(10) px2rem(10);
  background: #1f8cef;
  color: #fff;
  border-radius: 50%;
  margin: 0 px2rem(-1);
  margin-right: px2rem(15);
}
</style>